<template>
    <div class="my-table">
      <el-table 
          ref="myTable" 
          :key="currentTable + '_id'"
          :row-key="(row)=> {return row.id}"
          :data="tableData" 
          border 
          tooltip-effect="dark"
          class="padding-left-20"
          :header-cell-class-name="headerCellClassName"
          :cell-class-name="cellClassName"
          @selection-change="handleSelectionChange">
          <el-table-column
            v-if="hasSelection"
            :selectable="checkSelectMember"
            type="selection"
            :reserve-selection="true"
            width="55">
          </el-table-column>
          <el-table-column 
            v-for="(item,index) in tableItem"
            :label="item.name"
            :prop="item.prop"
            :key="index"
            :width="item.width"
            show-overflow-tooltip>
          </el-table-column>
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
      </el-table>
      <div class="pagination">
        <el-pagination 
          background
          layout="total,sizes, prev, pager, next"
          :page-sizes="[20, 50, 100]"
          :page-size="pageSize"
          :current-page.sync="currentPage"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
  </template>

  <script>
    export default {
      name: "myTable",
      data(){
        return {
          currentPage: 1,
          pageSize: 20,
        }
      },
      props: {
        currentTable: {
          type: String,
          default: 'default-table'
        },
        hasSelection: {
          type: Boolean,
          default: false
        },
        tableItem: {
          type: Array,
          default: () => []
        },
        tableData: {
          type: Array,
          default: () => []
        },
        total: {
          type: Number,
          default: 0
        },
        idEnableSelection: {
          type: Boolean,
          default: true
        }
      },
      methods: {
        checkSelectMember(row, index) {
          return this.idEnableSelection
        },
        cellClassName(){
          return 'body-cell-custom'
        },
        headerCellClassName(){
          return 'header-cell-custom'
        },
        //分页展示表格数据
        handleCurrentChange (val) {
          this.currentPage = val
          let data = {
            page_num: this.currentPage,
            page_size: this.pageSize
          }
          this.$emit("handlePageChange", data)
        },
        handleSizeChange(val){
          this.pageSize = val
          let data = {
            page_num: this.currentPage,
            page_size: this.pageSize
          }
          this.$emit("handlePageChange", data)
        },
        // 选中的数据
        handleSelectionChange(val){       
          this.$emit('selectionChange', val)
        }
      },
    }
  </script>
  
  <style lang='scss' scoped>
  @import '@/styles/vars.scss'; // 定义变量
  .my-table{
    padding-left: 20px;
    > .el-table{
      overflow: auto;
    }
    .operation-edit{
      color: $primary-color;
    }
  }
  </style>
  